<template>
  <div class="page-set-box">
    <ul v-if="pageNum > 0" class="page-box">
      <li v-for="value in pageNum" :class="{active: pageData.page === value }" :key="value" @click="setPage(value)">{{ value }}</li>
    </ul>
    <el-select v-model="pageData.pageSize" style="width: 150px;margin-left: 15px;">
      <el-option lable="3条/页" :value="3" />
      <el-option lable="5条/页" :value="5" />
      <el-option lable="6条/页" :value="6" />
      <el-option lable="8条/页" :value="8" />
      <el-option lable="10条/页" :value="10" />
    </el-select>
  </div>
</template>

<script lang="ts">

export default {
  props: {
    total: {
      type: Number,
      default: () => 0
    },
    pageData: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 3
        }
      }
    }
  },

  watch: {
    'pageData.pageSize': function(val) {
      this.$emit('pageSizeChange', val)
    }
  },
  computed: {
    pageNum() {
      if (this.total === 0) return 0;
      const resNum = this.total % this.pageData.pageSize
      if (resNum > 0) return ((this.total - resNum) / this.pageData.pageSize) + 1
      return this.total / this.pageData.pageSize
    },
  },
  methods: {
    setPage(page: number) {
      this.$emit('pageChange', page)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-set-box{
  display: flex;
  .page-box{
    margin-top: 10px;
    list-style: none;
    display: flex;
    li{
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      background-color: #fff;
      margin-left: 5px;
      cursor: pointer;
      &.active{
        color: #0160dd;
      }
    }
  }
}
</style>